<template>
  <div>
    <div
        style="position: fixed;top:0; width:100vw;height:60px;background-color: white;z-index:1;display: flex;justify-content: space-between">
      <div style="display: flex">
        <van-icon size="16px" name="arrow-left" @click="goBack" style="padding-top: 22px;margin-left: 10px"/>
        <mu-card-header style="padding: 8.25px 10px" :title="note.userName" :subTitle="note.userAccount">
          <mu-avatar slot="avatar">
            <mu-paper circle :z-depth="5">
              <img :src="note.userImg">
            </mu-paper>
          </mu-avatar>
        </mu-card-header>
      </div>
      <div style="padding-top: 15px;padding-right: 5vw">
        <van-button v-if="!note.isFollowed" style="width: 75px;height: 30px" type="info" text="关注"
                    @click="follow(note, 1)"/>
        <van-button v-else style="width: 75px;height: 30px" type="danger" text="已关注"
                    @click="follow(note, 0)"/>
      </div>
    </div>

    <div style="margin-top: 60px;margin-bottom: 80px">
      <van-pull-refresh v-model="refresh" @refresh="reload">

        <van-swipe style="height: 68vh">
          <van-swipe-item v-for="(image, index) in note.imgs" :key="index">
            <img style="width:100%;height:100%;" v-lazy="image"/>
          </van-swipe-item>
        </van-swipe>
        <mu-card-title :title="note.title" :sub-title="note.createTime"></mu-card-title>
        <mu-card-text>
          {{ note.text }}
        </mu-card-text>
        <div id="scrollEnd">
          <van-field style="margin-bottom: 16px" left-icon="smile-o" placeholder="喜欢就给评论支持一下" clearable
                     disabled/>
        </div>
        <van-divider :hairline="false">共{{ note.remarkNum }}条评论</van-divider>
        <div v-infinite-scroll="loadMoreRemark"
             infinite-scroll-distance="2">
          <div v-for="(remark, index) in remarkPage.remarks">
            <mu-card-header style="height: auto;padding: 0 0 0 16px" :title="remark.userName"
                            :subTitle="remark.createTime">
              <mu-avatar slot="avatar">
                <img :src="remark.userImg">
              </mu-avatar>
            </mu-card-header>
            <mu-card-text style="padding-left: 32px">
              {{ remark.remark }}
            </mu-card-text>
            <van-divider dashed :hairline="false" style="padding: 0 16px"/>
          </div>
        </div>
      </van-pull-refresh>
    </div>

    <div style="position: fixed;background-color:white;bottom: 0;width: 100%;height:80px;display: flex;">
      <van-field style="width: 60%;padding: 10px 6px;overflow: hidden"
                 v-model="form.remark"
                 rows="2"
                 type="textarea"
                 placeholder="说点什么..."
      />
      <van-button style="height:100%;width: 20%" type="primary" text="评论" @click="addRemark"></van-button>
      <div style="height: 100%;width: 20%;background-color: #FFFFFF;">
        <div style="display: inline-flex;margin: 8px 0">
          <img v-if="note.isLiked" src="../assets/images/icon/dz-1.png"
               style="height: 24px;width: 24px;margin: 0 10px;"
               @click="like(note, 0)"/>
          <img v-else src="../assets/images/icon/dz-0.png"
               style="height: 24px;width: 24px;margin: 0 10px;"
               @click="like(note, 1)"/>
          <p style="line-height: 24px;margin: 0 2px">{{ note.likeNum }}</p>
        </div>
        <div style="display: inline-flex;margin: 8px 0">
          <img v-if="note.isCollected" src="../assets/images/icon/sc-1.png"
               style="height: 24px;width: 24px;margin: 0 10px;"
               @click="collect(note, 0)"/>
          <img v-else src="../assets/images/icon/sc-0.png"
               style="height: 24px;width: 24px;margin: 0 10px;"
               @click="collect(note, 1)"/>
          <p style="line-height: 24px;margin: 0 2px">{{ note.collectNum }}</p>
        </div>

      </div>
    </div>
  </div>
</template>

<script>

import {Toast} from "vant";

function Note(note) {
  this.id = note.id;
  this.collectNum = note.collectNum;
  this.createTime = note.createTime;
  this.imgs = note.imgs;
  this.isCollected = note.isCollected;
  this.isFollowed = note.isFollowed;
  this.isLiked = note.isLiked;
  this.likeNum = note.likeNum;
  this.remarkNum = note.remarkNum;
  this.text = note.text;
  this.title = note.title;
  this.userImg = note.userImg;
  this.userName = note.userName;
  this.userId = note.userId;
  this.userAccount = note.userAccount;
}

function Remark(remark) {
  this.createTime = remark.createTime;
  this.id = remark.id;
  this.remark = remark.remark;
  this.userAccount = remark.userAccount;
  this.userId = remark.userId;
  this.userImg = remark.userImg;
  this.userName = remark.userName;
}

export default {
  data() {
    return {
      refresh: false,

      note: {
        id: "",
        collectNum: 0,
        createTime: "",
        imgs: [""],
        isCollected: false,
        isFollowed: false,
        isLiked: false,
        likeNum: 0,
        remarkNum: 0,
        text: "",
        title: "",
        userImg: "",
        userName: "",
        userId: "",
        userAccount: "",
      },

      remarkPage: {
        current: 1,
        pages: 0,
        remarks: [{
          createTime: "",
          id: "",
          remark: "",
          userAccount: "",
          userId: "",
          userImg: "",
          userName: "",
        }],
      },

      form: {
        remark: "",
      },
    };
  },
  mounted() {
    this.onload();
  },
  methods: {
    addRemark() {
      return this.http.post("/api/lj/note/remark/add", {
        noteId: this.note.id,
        remark: this.form.remark,
      }).then(() => {
        this.form.remark = "";
        this.onload().then(() => {
            document.scrollingElement.scrollTop = 0;
            Toast("评论成功");
        })
      });
    },
    loadMoreRemark() {
      if (this.remarkPage.current <= this.remarkPage.pages) {
        this.pageRemark(this.note.id, this.remarkPage.current);
      }
    },
    onload() {
      this.note.id = this.$route.query.id;
      return this.noteDetail().then(() => {
        this.remarkPage.current = 1;
        this.remarkPage.pages = 0;
        this.remarkPage.remarks = [];
        this.pageRemark(this.note.id, this.remarkPage.current)
        this.refresh = false;
      });
    },
    reload() {
      this.onload().then(() => {
        Toast("刷新成功")
      })
    },
    pageRemark(noteId, current) {
      return this.http.post("/api/lj/note/remark/page", {
        currentPage: current,
        noteId: noteId,
        pageSize: 10,
      }).then((res) => {
        this.remarkPage.current++;
        this.remarkPage.pages = res.data.data.pages;
        res.data.data.records.forEach((r) => {
          this.remarkPage.remarks.push(new Remark(r));
        })
      });
    },
    follow(note, type) {
      return this.http.get("/api/lj/user/follow?followedId=" + note.userId + "&type=" + type).then(() => {
        if (type === 0) {
          note.isFollowed = false;
          Toast("取关成功");
        } else {
          note.isFollowed = true;
          Toast("关注成功");
        }
      })
    },
    like(note, type) {
      return this.http.get("/api/lj/note/like?noteId=" + note.id + "&type=" + type).then(() => {
        if (type === 0) {
          note.isLiked = false;
          note.likeNum -= 1;
          Toast("取消点赞");
        } else {
          note.isLiked = true;
          note.likeNum += 1;
          Toast("点赞成功");
        }
      });
    },
    collect(note, type) {
      return this.http.get("/api/lj/note/collect?noteId=" + note.id + "&type=" + type).then(() => {
        if (type === 0) {
          note.isCollected = false;
          note.collectNum -= 1;
          Toast("取消收藏");
        } else {
          note.isCollected = true;
          note.collectNum += 1;
          Toast("收藏成功");
        }
      });
    },
    noteDetail() {
      return this.http.get("/api/lj/note/detail?noteId=" + this.note.id).then((res) => {
        this.note = new Note(res.data.data);
      });
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>

</style>
